<!--窗体模型-->
<template>
  <div class="form-model">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-chuangti" />
        </div>
        <span>窗体模型</span>
      </div>
      <div slot="extra">
        <a-tree-select
          style="width: 200px"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="FondsTreeData"
          @change="FondsChange"
          placeholder="全宗选择"
          tree-default-expand-all
          class="icon-button">
        </a-tree-select>
        <a-select placeholder="门类选择" style="width: 200px" @change="handleChange" class="icon-button">
          <a-select-opt-group label="基础业务">
            <a-select-option v-for="item in FMSelectOption.data" :key="item.FM_ID">
              {{ item.FM_OCName }}
            </a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="流程业务">
            <a-select-option v-for="item in FMSelectOption.workflow" :key="item.FM_ID">
              {{ item.FM_OCName }}
            </a-select-option>
          </a-select-opt-group>
        </a-select>
        <a-dropdown placement="bottomRight">
          <a-button type="primary" icon="upload" class="icon-button">窗体操作</a-button>
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="clickButton('add')" :disabled="BtnStatus[0]"><a-icon type="plus" />窗体新增</a-menu-item>
            <a-menu-divider />
            <a-menu-item key="2" @click="clickButton('edit')" :disabled="BtnStatus[1]"><a-icon type="edit" />窗体编辑</a-menu-item>
            <a-menu-divider />
            <a-menu-item key="3" @click="clickButton('del')" :disabled="BtnStatus[2]"><a-icon type="delete" />窗体删除</a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
      <div class="card-table">
        <div class="form-left" :style="{width: (isShowLeftTree ? '0': '18%')}">
          <div class="form-left-tree" v-if="!isShowLeftTree">
            <a-tree
              blockNode
              :treeData="FMTtreeData"
              :replaceFields="{ title: 'FMT_Name', key: 'FMT_ID' }"
              defaultExpandAll
              @select="onSelect"
              v-if="FMTtreeData.length > 0">
            </a-tree>
            <a-empty v-else />
          </div>
          <div class="handle" @click="treeToggle">
            <img src="@/assets/images/leftTree-show.png" alt="" v-if="!isShowLeftTree">
            <img src="@/assets/images/leftTree-hide.png" alt="" v-else>
          </div>
        </div>
        <div class="form-right" :style="{width: (isShowLeftTree ? 'calc(100% - 1px)': '82%')}">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="界面显示字段">
              <tab1 ref="FMtab1"/>
            </a-tab-pane>
            <a-tab-pane key="2" tab="字段规则">
              <tab2 ref="FMtab2"/>
            </a-tab-pane>
            <a-tab-pane key="3" tab="界面输入窗体">
              <tab3 ref="FMtab3"/>
            </a-tab-pane>
            <a-tab-pane key="4" tab="触发器">
              <tab4 ref="FMtab4"/>
            </a-tab-pane>
            <a-tab-pane key="5" tab="验证规则">
              <tab5 ref="FMtab5"/>
            </a-tab-pane>
            <a-tab-pane key="6" tab="门类报表">
              <tab6 ref="FMtab6"/>
            </a-tab-pane>
            <a-tab-pane key="7" tab="私有分类">
              <tab7 ref="FMtab7"/>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </a-card>

    <!-- 窗体模型弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalTitle"
      v-model="dialogFormVisible">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-form-item label="名称" >
          <a-input v-decorator="[ 'FMT_Name', {rules: [{ required: true, message: '请输入名称!' }]} ]" />
        </a-form-item>
        <a-form-item label="数据表">
          <a-select v-decorator="[ 'Table_Name', {rules: [{ required: true, message: '请选择数据表!' }]} ]">
            <a-select-option v-for="item in FModalSelect" :key="item.Name">{{ item.CN_name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="类型" >
          <a-input v-decorator="[ 'FMT_Type', {rules: [{ required: true, message: '请输入类型!' }]} ]" />
        </a-form-item>
        <a-form-item label="是否有小分类">
          <a-checkbox size="small" v-decorator="[ 'FMT_IsSmallCatalog', { valuePropName: 'checked', initialValue: true } ]" />
        </a-form-item>
        <a-form-item label="是否启用">
          <a-checkbox size="small" v-decorator="[ 'FMT_SetDataStatus', { valuePropName: 'checked', initialValue: true } ]" />
        </a-form-item>
        <a-form-item label="备注">
          <a-input type="textarea" v-decorator="[ 'FMT_Remark' ]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import pick from 'lodash.pick'
import { tab1, tab2, tab3, tab4, tab5, tab6, tab7 } from './components'
export default {
  name: '',
  components: {
    tab1,
    tab2,
    tab3,
    tab4,
    tab5,
    tab6,
    tab7
  },
  data () {
    return {
      FondsTreeData: [], // 全宗下拉显示数据
      FMSelectOption: { // 门类归档下拉显示数据
        workflow: [],
        data: []
      },
      isShowLeftTree: false,
      BtnStatus: [true, true, true], // 窗体模型操作按钮状态
      FMTtreeData: [], // 窗体模型数据
      dialogFormVisible: false, // 窗体模型弹框是否显示
      modalTitle: '', // 窗体模型弹框标题
      form: this.$form.createForm(this),
      FModalSelect: [], // 获取窗体模型弹框内数据表数据
      FMTclickSave: {} // 点击窗体模型数据保存对象
    }
  },
  created () {
    this.getFondsTreeData()
    this.getModalSelectData()
  },
  mounted () {},
  methods: {
    // 左侧显示与隐藏事件
    treeToggle () {
      this.isShowLeftTree = !this.isShowLeftTree
    },
    // 获取全宗树数据
    getFondsTreeData () {
      this.$vueAjax.get('Sys_Base_Fonds/get', { treeId: {}, order: [{ Order: 1, Param: 'Fonds_Order' }] }).then(res => {
        const treeData = []
        res.Node.forEach(item => {
          treeData.push(this.getTreeNode(item))
        })
        this.FondsTreeData = treeData
      })
    },
    getModalSelectData () {
      this.$vueAjax.get('table/get', {}).then(res => {
        const selectData = []
        res.List.forEach(item => {
          if (item.Remark) {
            const itemStr = item.Remark.split('&')
            selectData.push({ CN_name: itemStr[0], Name: item.Name })
          } else {
            selectData.push({ CN_name: null, Name: item.Name })
          }
        })
        this.FModalSelect = selectData
      })
    },
    // 选择全宗获取门类归档方式数据
    FondsChange (value) {
      this.getFMData(value)
    },
    // 获取门类归档方式下拉框数据
    getFMData (value) {
      const result = []
      const result2 = []
      if (value) {
        const queryParam = { searchList: [{ Fonds_ID: value }], flag: 2 }
        this.$vueAjax.get('Sys_Base_Fonds_Class/get', queryParam).then(res => {
          var param = { searchList: [], flag: 2 }
          res.List.forEach(item => {
            var tempObj = { FC_ID: item.FC_ID }
            param.searchList.push(tempObj)
          })
          if (param.searchList.length > 0) {
            this.$vueAjax.get('Sys_Base_FormModel/get', param).then(res2 => {
              res2.List.forEach(item => {
                if (item.FM_IsWorkFlow) {
                  result.push(item)
                } else {
                  result2.push(item)
                }
              })
              this.FMSelectOption = {
                workflow: result,
                data: result2
              }
            })
          }
        })
      }
    },
    // 选择归档方式获取窗体模型数据
    handleChange (value) {
      this.getFMTtableData(value)
      this.BtnStatus = [false, true, true]
    },
    // 获取窗体模型数据
    getFMTtableData (FMId) {
      if (FMId) {
        const param = { searchList: [{ FM_ID: FMId }], order: [{ Order: 1, Param: 'FMT_Type' }], flag: 2 }
        this.$vueAjax.get('Sys_Base_FormModel_Table/get', param).then(res => {
          console.log(res)
          this.FMTtreeData = res.List
        })
      } else {
        this.FMTTableData = []
      }
    },
    // 点击窗体模型树
    onSelect (selectedKeys, info) {
      console.log(info.node.dataRef)
      this.FMTclickSave = info.node.dataRef
      this.BtnStatus = [false, false, false]
    },
    // 窗体模型增删改事件
    clickButton (val) {
      switch (val) {
        case 'add':
          this.modalTitle = '新增窗体'
          this.dialogFormVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'edit':
          this.modalTitle = '编辑窗体'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            const Formfilter = ['Table_Name', 'FMT_Type', 'FMT_Name', 'FMT_Remark', 'Catalog_Name', 'FMT_SetDataStatus', 'FMT_IsSmallCatalog']
            this.form.setFieldsValue(pick(this.FMTclickSave, Formfilter))
          })
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    // 全宗tree数据转换
    getTreeNode (item) {
      var childrenNode = {
        title: item.Fonds_Name,
        key: item.Fonds_ID,
        value: item.Fonds_ID
      }
      if (item.Next && item.Next.length) {
        childrenNode.children = []
        item.Next.forEach((subItem) => {
          childrenNode.children.push(this.getTreeNode(subItem))
        })
      }
      return childrenNode
    }
  }
}
</script>

<style lang="less" scoped>
.form-model {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .card-table {
    height: 100%;
    .form-left {
      float: left;
      width: 18%;
      height: 100%;
      border: 1px solid #EBEEF5;
      border-right: none;
      position: relative;
      transition: all 0.2s;
      .handle {
        position: absolute;
        right: -18px;
        top: 50%;
        margin-top: -32px;
        z-index: 100;
        cursor: pointer;
      }
    }
    .form-right {
      float: left;
      width: 82%;
      height: 100%;
      border: 1px solid #EBEEF5;
      transition: all 0.2s;
      /deep/ .ant-tabs {
        height: 100%;
        background: #FFF;
        .ant-tabs-bar {
          margin: 0;
        }
        .ant-tabs-content {
          height: calc(100% - 44px);
        }
      }
    }
  }
}
</style>
